<template>
	<view class="organization-member">
		<!-- 顶部导航 -->
		<tn-nav-bar fixed alpha customBack :bottomShadow="false" backgroundColor="#fff">
			<view slot="default" class="nav-title">
				{{ organizationName }} - 成员列表
			</view>
		</tn-nav-bar>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 成员统计 -->
			<view class="member-stats">
				<view class="stat-item">
					<text class="stat-number">{{ totalMembers }}</text>
					<text class="stat-label">全部成员</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ presidentCount }}</text>
					<text class="stat-label">会长</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ vicePresidentCount }}</text>
					<text class="stat-label">副会长</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ memberCount }}</text>
					<text class="stat-label">会员</text>
				</view>
			</view>

			<!-- 成员列表 -->
			<view class="member-list">
				<!-- 按职位分组显示 -->
				<view class="member-category" v-for="category in filteredMemberCategories" :key="category.role">
					<view class="category-header">
						<text class="category-title">{{ category.title }}</text>
						<text class="category-count">{{ category.members.length }}人</text>
					</view>
					<view class="category-members">
						<view class="member-card" v-for="member in category.members" :key="member.id"
							@click="viewMemberDetail(member)">
							<view class="member-avatar-section">
								<image :src="member.avatar" class="member-avatar" mode="aspectFill"></image>
							</view>
							<view class="member-info">
								<view class="member-name-section">
									<text class="member-name">{{ member.name }}</text>
								</view>
								<text class="member-college">{{ member.college }} · {{ member.major }}</text>
								<text class="member-enrollment">{{ member.enrollmentYear }}级</text>
								<text class="member-join-time">加入时间：{{ member.joinDate }}</text>
							</view>
							<view class="member-action">
								<text class="tn-icon-right" style="font-size: 28rpx; color: #ccc;"></text>
							</view>
						</view>
					</view>
				</view>

				<!-- 无成员时显示 -->
				<view class="no-members" v-if="!hasMembers">
					<image src="/static/empty-member.png" class="empty-image" mode="aspectFit"></image>
					<text class="empty-text">暂无成员信息</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrganizationMember',
		data() {
			return {
				organizationId: '',
				organizationName: '',
				searchKeyword: '',
				// 模拟成员数据 - 实际项目中从接口获取
				members: [{
						id: 1,
						name: "张明",
						avatar: "/static/member1.png",
						role: "president",
						college: "计算机学院",
						major: "计算机科学与技术",
						enrollmentYear: "2018",
						joinDate: "2021-03-15",
						verified: true
					},
					{
						id: 2,
						name: "李华",
						avatar: "/static/member2.png",
						role: "vicePresident",
						college: "软件学院",
						major: "软件工程",
						enrollmentYear: "2019",
						joinDate: "2021-04-20",
						verified: true
					},
					{
						id: 3,
						name: "王芳",
						avatar: "/static/member3.png",
						role: "vicePresident",
						college: "信息学院",
						major: "信息安全",
						enrollmentYear: "2019",
						joinDate: "2021-05-10",
						verified: true
					},
					{
						id: 4,
						name: "赵杰",
						avatar: "/static/member4.png",
						role: "member",
						college: "电子工程学院",
						major: "电子信息工程",
						enrollmentYear: "2020",
						joinDate: "2022-01-15",
						verified: false
					},
					{
						id: 5,
						name: "刘强",
						avatar: "/static/member5.png",
						role: "member",
						college: "机械工程学院",
						major: "机械设计制造",
						enrollmentYear: "2019",
						joinDate: "2022-02-20",
						verified: true
					},
					{
						id: 6,
						name: "陈晨",
						avatar: "/static/member6.png",
						role: "member",
						college: "经济管理学院",
						major: "工商管理",
						enrollmentYear: "2020",
						joinDate: "2022-03-10",
						verified: false
					},
					{
						id: 7,
						name: "杨丽",
						avatar: "/static/member7.png",
						role: "member",
						college: "外国语学院",
						major: "英语",
						enrollmentYear: "2021",
						joinDate: "2022-04-05",
						verified: true
					},
					{
						id: 8,
						name: "周伟",
						avatar: "/static/member8.png",
						role: "member",
						college: "艺术学院",
						major: "视觉传达设计",
						enrollmentYear: "2018",
						joinDate: "2021-12-01",
						verified: false
					}
				]
			};
		},
		computed: {
			// 成员统计
			totalMembers() {
				return this.members.length;
			},
			presidentCount() {
				return this.members.filter(member => member.role === 'president').length;
			},
			vicePresidentCount() {
				return this.members.filter(member => member.role === 'vicePresident').length;
			},
			memberCount() {
				return this.members.filter(member => member.role === 'member').length;
			},
			// 是否有成员
			hasMembers() {
				return this.members.length > 0;
			},
			// 搜索过滤后的成员
			filteredMembers() {
				if (!this.searchKeyword) {
					return this.members;
				}
				const keyword = this.searchKeyword.toLowerCase();
				return this.members.filter(member =>
					member.name.toLowerCase().includes(keyword) ||
					member.college.toLowerCase().includes(keyword) ||
					member.major.toLowerCase().includes(keyword)
				);
			},
			// 按职位分类的成员
			filteredMemberCategories() {
				const categories = [{
						role: 'president',
						title: '会长',
						members: this.filteredMembers.filter(member => member.role === 'president')
					},
					{
						role: 'vicePresident',
						title: '副会长',
						members: this.filteredMembers.filter(member => member.role === 'vicePresident')
					},
					{
						role: 'member',
						title: '会员',
						members: this.filteredMembers.filter(member => member.role === 'member')
					}
				];

				// 过滤掉没有成员的分类
				return categories.filter(category => category.members.length > 0);
			},
			// 是否有搜索结果
			hasSearchResult() {
				return this.filteredMembers.length > 0;
			}
		},
		onLoad(options) {
			this.organizationId = options.id;
			this.organizationName = decodeURIComponent(options.name || '');
			this.fetchMemberList();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			// 获取成员列表
			fetchMemberList() {
				// 实际项目中调用接口获取成员列表
				// 这里使用模拟数据
				console.log('获取组织成员列表，组织ID:', this.organizationId);
			},

			// 获取角色文本
			getRoleText(role) {
				const roleMap = {
					president: '会长',
					vicePresident: '副会长',
					member: '会员'
				};
				return roleMap[role] || '会员';
			},

			// 查看成员详情
			viewMemberDetail(member) {
				uni.navigateTo({
					url: `/homePages/memberDetail?id=${member.id}&name=${encodeURIComponent(member.name)}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.organization-member {
		width: 100%;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	/* 导航栏样式 */
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.05);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #333;
		}
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 内容区域 */
	.content {
		padding: 30rpx;
		padding-top: 120rpx;
	}

	/* 搜索栏 */
	.search-section {
		margin-bottom: 30rpx;
	}

	.search-input {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	/* 成员统计 */
	.member-stats {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #007AFF;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
	}

	/* 成员列表 */
	.member-list {
		margin-bottom: 30rpx;
	}

	.member-category {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #f9f9f9;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.category-count {
		font-size: 26rpx;
		color: #999;
	}

	.category-members {
		padding: 0 30rpx;
	}

	.member-card {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		transition: all 0.3s;

		&:active {
			background-color: #f8f8f8;
		}

		&:last-child {
			border-bottom: none;
		}
	}

	.member-avatar-section {
		margin-right: 20rpx;
	}

	.member-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.member-info {
		flex: 1;
	}

	.member-name-section {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.member-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 10rpx;
	}

	.member-college {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.member-enrollment {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 5rpx;
	}

	.member-join-time {
		display: block;
		font-size: 22rpx;
		color: #ccc;
	}

	.member-action {
		margin-left: 20rpx;
	}

	/* 空状态 */
	.no-members,
	.no-search-result {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>